<template>
	<div>
		<div class="wrapper">
			<el-card>
				<div class="a3">
					<span>你的选择：</span>
					<div v-for="(items,index) in addList" :key="index">
						<span>{{items.tit}}</span>
						<span @click="remove(index)">X</span>
					</div>
				</div>

				<div class="a1" v-for="(item,index) in list" :key="index">
					<p class="list">{{item.name}}</p>
					<div class="a2" v-for="(item1,index) in item.children" :key="index">
						<p @click="add(index)">{{item1.tit}}</p>
					</div>
				</div>

			</el-card>
		</div>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				list: [{
						name: "品牌",
						id: 0,
						children: [{
							tit: "苹果",
							nums: 0,
						}, {
							tit: "小米",
							nums: 1,
						}, {
							tit: "华为",
							nums: 2,
						}, ]
					},
					{
						name: "尺寸",
						id: 1,
						children: [{
							tit: "1~2",
							nums: 0,
						}, {
							tit: "3~4",
							nums: 1,
						}, {
							tit: "5~6",
							nums: 2,
						}, ]
					},
					{
						name: "系统",
						id: 2,
						children: [{
							tit: "安卓",
							nums: 0,
						}, {
							tit: "苹果",
							nums: 1,
						}, {
							tit: "其他",
							nums: 2,
						}, ]
					},
					{
						name: "网络",
						id: 3,
						children: [{
							tit: "移动4G",
							nums: 0,
						}, {
							tit: "联通4G",
							nums: 1,
						}, {
							tit: "电信4G",
							nums: 2,
						}, ]
					}
				],
				addList: [],
				num: 0,
			}
		},
		// 组件方法
		methods: {
			add(index) {
				this.list.forEach(item => {
					if (item.id == 0) {
						this.addList.push(item.children[index])
					} else if (item.id == 1) {
						this.addList.push(item.children[index])
					} else if (item.id == 2) {
						this.addList.push(item.children[index])
					} else if (item.id == 3) {
						this.addList.push(item.children[index])
					}
				})
			},
			remove(index) {
				this.addList.splice(index, 1)
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style scoped>
	.wrapper {
		margin: 50px auto;
		width: 600px;
		cursor: pointer;
	}

	.a1 {
		display: flex;
		align-items: center;
	}

	.a2 {
		margin-left: 20px;
	}

	.a3 {
		display: flex;
		align-items: center;
	}

	.a3 div {
		width: 60px;
		height: 25px;
		border: 1px solid green;
		font-size: 14px;
		text-align: center;
		line-height: 25px;
		display: flex;
		justify-content: space-around;
	}

	.a3 div span:nth-child(2) {
		display: block;
		font-size: 16px;
		color: #CCCCCC;
	}
</style>
